<template>
  <el-container>
    <el-header></el-header>
    <el-main>
      <div style="width: 30%;">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="姓名" prop="accountName">
            <el-input v-model="ruleForm.accountName"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="accountPhone">
            <el-input v-model="ruleForm.accountPhone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="accountEmail">
            <el-input v-model="ruleForm.accountEmail"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="company">
            <el-select v-model="ruleForm.company" placeholder="请选择公司">
              <el-option label="工程维修中心" value="1"></el-option>
              <el-option label="动力服务中心" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动区域" prop="area">
            <el-select v-model="ruleForm.area" placeholder="请选择活动区域">
              <el-option label="学生宿舍" value="1"></el-option>
              <el-option label="行政办公楼" value="2"></el-option>
              <el-option label="校内公共区域" value="3"></el-option>
              <el-option label="教学科研楼" value="4"></el-option>
              <el-option label="其他经营类或附属建筑" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: "repairpeople",
    data() {
      //校验邮箱的规则
      var checkEmail = (rule, value, callback) => {
        const reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(!reg.test(value)){
          callback(new Error('请输入有效的邮箱'));
        }
        callback();
      }

      // 验证手机号的规则
      var checkMobile = (rule, value, callback) => {
        const reg=/^1[3456789]\d{9}$/;
        if(!reg.test(value)){
          callback(new Error('请输入有效的手机号码'));
        }
        callback();
      }
      return {
        ruleForm: {
          accountName: '',
          accountPhone: '',
          accountEmail: '',
          company: '',
          area: '',
        },

        rules: {
          accountName: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          accountEmail: [{
              required: true,
              message: '请输入邮箱',
              trigger: 'blur'
            },
          {
            validator: checkEmail,
            trigger: 'blur'
          }
          ],
          accountPhone: [{
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          },
          {
            validator: checkMobile,
            trigger: 'blur'
          }],
          company: [{
            required: true,
            message: '请选择公司',
            trigger: 'change'
          }],
          area: [{
            required: true,
            message: '请选择工作区域',
            trigger: 'change'
          }],
        }
      }
    },
    methods: {
      test() {
        console.log(this.ruleForm)
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http.post("/account/addrepair", this.ruleForm).then(resp => {
              if (resp.data.code == 200) {
                alert('添加成功!账号为'+resp.data.data);
              } else {
                console.log(resp.data)
                alert("出错了")
              }
              this.resetForm(formName)
            })

          } else {
            alert("请按规则填写")
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    created() {

    }
  }
</script>

<style>
</style>
